// components/notice/notice.js
const computedBehavior = require('miniprogram-computed');
Component({
  behaviors: [computedBehavior],
  /**
   * 组件的属性列表
   */
  properties: {
    list: {
      type: Object,
      value:[{
      notice: '通知：疫情期间，不能按时发货，希望您敬请谅',
    }]
    },
    width:{
      type:String,
      value:'750rpx'
    },
    height:{
      type:String,
      value:'60rpx'
    },
    backgroundColor:{
      type:String,
      value:"rgb(236, 249, 255)"
    },
    borderRadius:{
      type:String,
      value:"12rpx"
    },
    textStyle:{
      type:String,
      value:'font-size:24rpx;color:purple;'
    }
  },
  attached() {
  },
  watch: {
    startState(nextValue) {
      setTimeout(() => {
        this.setData({
          active: false,
          styles: {
            ...this.data.styles,
            paddingLeft:this.data.width,
            animationDelay: '0s',
            animationDuration: (this.data.anidurMiddle * 2 + 's')
          }
        })
        if (this.data.list.length > 1) {
          this.setData({
            number: ++this.data.number,
            showText: this.data.list[this.data.number].notice
          })
          // this.number++;
          // this.showText = this.list[this.number].notice;
        }
        setInterval(() => {
          this.setData({
            number: ++this.data.number
          })
          // this.number++;
          if (this.data.number-1 == this.data.ListLength) {
            this.setData({
              number: 0
            })
          } 
          this.setData({
            showText: this.data.list[this.data.number].notice
          })
          // this.showText = this.list[this.number].notice;

        }, this.data.anidurMiddle * 2 * 1000);
      }, Math.ceil(this.data.anidurMiddle + 1) * 1000);
    },
    list(nextValue) {
      nextValue.length > 0 && this.setData({
        styles: {
          ...this.data.styles,
          animationDuration: ((this.data.list[0].notice.length * 0.2) + 's')
        },
        anidurMiddle: (this.data.list[0].notice.length * 0.2),
        showText: this.data.list[this.data.number].notice,
        ListLength: this.data.list.length-1,
        startState: !this.data.startState
      })
      // this.data.styles.animationDuration = (this.data.list[0].notice.length * 0.2) + 's';
      // this.anidurMiddle = (this.data.list[0].notice.length * 0.2);
      // this.showText = this.list[this.number].notice;
      // this.ListLength = this.list.length - 1;
      // this.startState = !this.startState;
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    transition: 'all 4s linear',
    translateX: 0,
    showText: "",
    anidurMiddle: '',
    styles: {
      // animation: 'notice-scroll 5s linear  both',
      // marginLeft: 616 rpx,
      paddingLeft: 0,
      animationDuration: '3s',
      animationDelay: '1s'
    },
    delay: false,
    active: true,
    number: 0, //计数器
    ListLength: 0,
    startState: false,
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})